<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视频购买</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        [v-cloak]{
            display: none !important;
        }
        .detil{
            width: 90%;
            margin: 0 auto;
        }
        .detil img{
            width: 100%;
        }
    </style>
</head>
<body style="background: white;">

<div id="vue" v-cloak>
    <header class="mui-bar mui-bar-nav top-color">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
        <h1 class="mui-title" style="color: white;">
             创意视频
        </h1>
    </header>

    <div class="mui-card" style="margin-top: 60px;">
        <div class="mui-card-header mui-card-media" style="height:60vw;">
            <img :src="video.imageUrl" style="width: 100%;height: 100%;">
        </div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p>视频上传时间: {{time}}</p>
                <p style="color: #333;">{{video.videoTitle}}</p>
                <p style="color:red;">￥{{video.price}}</p>
            </div>
        </div>
        <!--<div class="mui-card-footer">-->
            <!--&lt;!&ndash;<a class="mui-card-link">Like</a>&ndash;&gt;-->
            <!--&lt;!&ndash;<a class="mui-card-link">Read more</a>&ndash;&gt;-->
        <!--</div>-->
    </div>
    <div class="mui-card" style="margin-top: 60px;margin-bottom: 60px;">
        <p style="padding: 10px;color: #000000;">详情介绍：</p>
        <div class="mui-content" style="background: white;" >
            <div class="detil" v-html="video.videoDetails">
              {{video.videoDetails}}
            </div>

        </div>
    </div>

    <nav class="mui-bar mui-bar-tab" style="height: 40px;">
        <div class="mui-input-row mui-password" style="border: 0px;">
            <!--<button type="button" id="place"  class="mui-btn mui-btn-primary" style="width: 30%;top: 0px;line-height:1;-->
            <!--border: 0;background-color:rgb(56,206,204);">加入购物车</button>-->
            <button type="button" style="width: 50%;top: 0px;line-height:1;border: 0;background-color: rgb(0, 0, 0);color: yellow;"
                    v-on:click="saveM"      class="mui-btn mui-btn-primary" id="reviewM">开通包月</button>
            <button type="button" style="width: 50%;top: 0px;line-height:1;border: 0;background-color: rgb(247, 70, 33);"
                    v-on:click="save"      class="mui-btn mui-btn-primary" id="review">单个购买</button>
        </div>
    </nav>
</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var vue = new Vue({
        el: '#vue',
        data: {
            video: '',
            time:''

        },
        created:function () {   //实例初始化创建完成执行

            this.getVideoDesc();     //调用自身方法

        },
        methods:{              //定义封装方法
            //获取列表
            getVideoDesc:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/getVideoDesc.html",
                    dataType:"JSON",
                    data:{
                        id:'${id!}',
                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.video=data.data;
                            var time = timestamp(data.data.opAt)
                            self.time = time;
                        } else {

                        }
                    }
                });

            },
            save:function () {
                var id= this.video.id;
                window.location.href="${base!}/open/h5/order/videoOrderConfirmation.html?videoId="+id+"&type=2&num=0";
            },
            saveM:function () {
                var id= this.video.id;
                layer.open({
                    title: [
                        '请确定要购买的月数',
                        'background-color:#8DCE16; color:#fff;'
                    ]
                    ,anim: 'up'
                    ,content: '<div style="display: inline" >\n' +
                        '            <div style="float: left;width: 35%" class="price" >\n' +
                        '                数量：\n' +
                        '            </div>\n' +
                        '            <div style="float: right;width: 35%;left: 0%;margin-top:-8px;" class="mui-numbox" data-numbox-min=\'1\' data-numbox-max=\'1000\'>\n' +
                        '                <button id="jj" onclick="numJj()" class="mui-btn mui-btn-numbox-minus" type="button">-</button>\n' +
                        '                <input id="productNum" class="mui-input-numbox" type="number" value="1" />\n' +
                        '                <button id="add" onclick="numAdd()" class="mui-btn mui-btn-numbox-plus" type="button">+</button>\n' +
                        '\n' +
                        '            </div>\n' +
                        '        </div>'
                    ,btn: ['确认', '取消']
                    ,yes: function(index){
                        var num = $("#productNum").val();
                        if (!(/(^[1-9]\d*$)/.test(num))) {
                            layerAlert("请输入正整数");
                            return false;
                        }else {
                            window.location.href="${base!}/open/h5/order/videoOrderConfirmation.html?videoId="+id+"&type=3&num="+num;
                        }

                    }
                });

            }

        },
        watch:{     //监听器
        }

    })

    function numAdd() {
        var num = $("#productNum").val();
        num++
        $("#productNum").val(num);
    }

    function numJj() {
        var num = $("#productNum").val();
        if(num<=1){
            return;
        }
        num--
        $("#productNum").val(num);
    }




    //处理时间戳
    function timestamp(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes();
        s = date.getSeconds();
        return Y+M+D+h+m;
    }

    function layerAlert(msg) {
        //提示
        layer.open({
            content: msg
            ,skin: 'msg'
            ,time: 2 //2秒后自动关闭
        });
    }
</script>
</body>
</html>
